Keeping Buttons in a Pressed State
Description
By default, the buttons that you add to a UX component only remain in their 'pressed' state for as long as you hold down the mouse-button over them. As soon as the mouse-button is released the button will return to its regular unpressed state. Sometimes, however, it is useful to keep a button in its pressed state until something, like a dialog, is closed or some action is run.
Setting the State on a Normal Button
There is currently no easy way to set a pressed state on a normal button. Work is being done to remedy this. To be updated....
Pressed State on Split Buttons
Split buttons are covered more extensively in the '[Split Buttons]' guide. The section below describes how you can set split buttons to have a 'pressed' or 'not pressed' state.
In the UX Builder, on the UX Controls page, open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.
Highlight the button in the controls tree. In the Properties list on the right, the 'Advanced button control type' property in the 'Button Properties' section should be set to 'Button'.
In the 'Button Appearance' section check the 'Has dropdown icon' checkbox.
Check the 'Display as split button' checkbox that appears.
Go to the 'Other Controls' menu on left and click on the [Button] option again to add a second button to the component.
Highlight the second button in the controls tree. In the Properties list on the right set the 'Button text' to read 'Pressed'.
Scroll down to the 'Javascript' section and click the [...] button next to the 'onClick' property.
Select the 'Text mode' radio button option in the 'Editing mode' menu, add the following code to the onClick event's definition, and click Save.
var b = {dialog.object}.getControl('BUTTON_1'); b.setState({dialog.object}.getPointer('BUTTON_1'),true);
In the Other Controls menu click on [Button] a third time to add another button to the component.
Highlight the third button in the controls tree and, in the Properties list, set the 'Button text' property to read 'Not Pressed'.
Scroll down to the 'Javascript' section for the third button and click the [...] button next to the 'onClick' property.
In the 'Edit onClick Event' dialog select the 'Text mode' radio button option and add the following code to the onClick event's definition. Click Save.
var b = {dialog.object}.getControl('BUTTON_1'); b.setState({dialog.object}.getPointer('BUTTON_1'),false);
Run the component in 'Live Preview'. When you click on the 'Pressed' button the split button should stay in its pressed state.
Press the 'Not Pressed' button. The split button should return to normal.
See Also